<template>
<div class="login">
  <div class="loginHeader">
    <div class="logoContent">
      <div class="logo"></div>
    </div>
  </div>
  <div class="loginContent">
    <el-row>
      <el-col :span="24">
        <div class="content">
          <el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="left" label-width="0px" class="login-container">
            <div class="login-logo"></div>
            <el-form-item prop="accountName">
              <el-input type="text" v-model="loginForm.accountName" auto-complete="off" placeholder="请输入用户名">
                <template slot="prepend"><i class="fa fa-user" aria-hidden="true"></i></template>
              </el-input>
            </el-form-item>
            <el-form-item prop="accountPwd">
              <el-input type="password" v-model="loginForm.accountPwd" @keyup.enter.native="handleSubmit"  auto-complete="off" placeholder="请输入密码">
                <template slot="prepend"><i class="fa fa-lock" aria-hidden="true"></i></template>
              </el-input>
            </el-form-item>
            <el-checkbox v-model="loginForm.state" @change.native.prevent="changeCookie(loginForm)" class="remember">记住用户名</el-checkbox>
            <a href="">忘记密码？</a>
            <el-form-item>
              <el-button class="loginBtn" @click.native.prevent="handleSubmit" :loading="logining">登录</el-button>
                <!-- <el-col :span="6" :offset="1">
                  <el-button class="resetBtn" @click.native.prevent="handleReset">重置</el-button>
                </el-col> -->
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
  <div class="loginFooter">
    <b>Copyright © 2016-2020 <b class="text">JF Healthcare</b>.</b> All rights reserved.
  </div>
</div>
</template>

<script>
  import { login, keyPair, getCurrentUserInfo } from '../api/api';
  import jquery from 'jquery';
  import util from '../common/security';
  export default {
    data() {
      return {
        logining: false,
        loginForm: {
          accountName: '',
          accountPwd: '',
          state: true
        },
        rules: {
          accountName: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          accountPwd: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      handleSubmit() { //登录提交
        var _this = this;
        this.$refs.loginForm.validate(function(valid) { //表单验证
          if (valid) {
            _this.logining = true;
            // keyPair().then(function(response) { //密码加密处理
              // var modulus = response.data.ownModulus, 
              //     exponent = response.data.exponent;
              // let publicKey = RSAUtils.getKeyPair(exponent, '', modulus);

              // let password = encodeURIComponent(_this.loginForm.accountPwd);              
              // password = RSAUtils.encryptedString(publicKey, password);

              let paramData = {
                accountName: _this.loginForm.accountName,
                // accountPwd: password
                accountPwd: _this.loginForm.accountPwd
              };
              login(paramData).then(function(res) { //登录请求
                console.log(res);
                console.log(res.data.status);
                
                
                if (res.data.status === '200') {
                  if (_this.loginForm.state) { //登录成功存入用户名、密码
                    _this.setCookie('username', _this.loginForm.accountName);
                    _this.setCookie('password', _this.loginForm.accountPwd);
                  }
                  getCurrentUserInfo().then(function(data) {
                    var userInfo = data.data;
                    sessionStorage.setItem('userInfo', JSON.stringify(userInfo));
                    _this.$router.push({ path: '/main' }); //登录成功跳转主页面    
                  })                    
                } else {
                  _this.logining = false;
                  _this.$message.error('用户名或密码错误');
                }
              })
            // })

          } else {
            return false;
          }
        });
      },
      setCookie(key, val, time) { //设置cookie
        var date=new Date(); //获取当前时间
        var expiresDays=time;  //将date设置为n天以后的时间
        date.setTime(date.getTime()+expiresDays*24*3600*1000); //格式化为cookie识别的时间
        document.cookie=key + "=" + val +";expires="+date.toGMTString();  //设置cookie
      },
      getCookie(key) { //获取cookie
        /*获取cookie参数*/
        var getCookie = document.cookie.replace(/[ ]/g,"");  //获取cookie，并且将获得的cookie格式化，去掉空格字符
        var arrCookie = getCookie.split(";")  //将获得的cookie以"分号"为标识 将cookie保存到arrCookie的数组中
        var tips;  //声明变量tips
        for(var i=0;i<arrCookie.length;i++){   //使用for循环查找cookie中的tips变量
          var arr=arrCookie[i].split("=");   //将单条cookie用"等号"为标识，将单条cookie保存为arr数组
          if(key==arr[0]){  //匹配变量名称，其中arr[0]是指的cookie名称，如果该条变量为tips则执行判断语句中的赋值操作
            tips=arr[1];   //将cookie的值赋给变量tips
            break;   //终止for循环遍历
          }    
        }
        return tips;   
      },
      delete(key) { //删除cookie
        var date = new Date(); //获取当前时间
        date.setTime(date.getTime()-10000); //将date设置为过去的时间
        document.cookie = key + "=v; expires =" +date.toGMTString();//设置cookie
      },
      changeCookie(loginForm) { //监听checkbox是否选中
        if (!loginForm.state) {
          this.delete('username');
          this.delete('password');
        }
      }
    },
    mounted() {
      if (this.getCookie('username')) { //从缓存中取出用户名
        this.loginForm.accountName = this.getCookie('username');
      } 
      if (this.getCookie('password')) { //从缓存中取出用户密码
        this.loginForm.accountPwd = this.getCookie('password');
      }
    }
  }

</script>

<style scoped>
  .loginHeader{
    height: 35px;
    background: #b2bdce;
  }
  .loginHeader .logoContent{
    padding-top: 5px;
  }
  .loginHeader .logoContent .logo{
    width: 90px;
    height: 35px;
    margin-left: 10px;
    background: url('../assets/logo.png') no-repeat;
    background-size: 100%; 
  }
  .loginContent .login-logo{
    width: 90px;
    height: 35px;
    margin-bottom: 20px;
    background: url('../assets/logo.png') no-repeat;
    background-size: 100%; 
  }
  .loginContent .content{
    width: 100%;
    height: 670px;
    background: url('../assets/login-bg.jpg') no-repeat;
    background-size: cover;
    position: relative;
  }
  .loginContent .content .el-form-item{
    margin-bottom: 35px;
  }
  .loginContent .content a{
    color: #2772DB;
    float: right;
    font-size: 15px;
  }
  .loginContent .content .login-container{
    width: 20%;
    height: 370px;
    background: #fff;
    padding: 20px;
    opacity: 0.95;
    border: solid 1px #eaeaea;
    position: absolute;
    top: 17%;
    margin-left: 40%;
  }
  .loginContent .content .remember{
    color: #346b97;
    margin-bottom: 10px;
  }
  .loginContent .content .loginBtn{
    width: 100%;
    color: #fff;
    background: #2f7ab9;
    margin-top: 15px;
  }
  .loginContent .content .resetBtn{
    width: 100%;
    color: #fff;
    background: #638CCC;
    margin-top: 15px;
    font-size: 13px;
  }
  .loginFooter{
    color: #444;
    line-height: 45px;
    font-size: 13px;
    text-align: center;
  }
  .fa-user{
    color: #2f7ab9;
    font-size: 20px;
  }
  .fa-lock{
    color: #2f7ab9;
    font-size: 20px;
  }

  .loginFooter .text {
    color: #337ab7;
  }
</style>
